<template>
  <entity-view
    :operator-type="operatorType"
    :model="beanInfo"
    @submit="submit"
    :rules="rules"
    ref="form"
  >
    <a-tabs v-model="tabActiveKey">
      <a-tab-pane
        key="baseInfo"
        tab="基本信息"
        :disabled="tabActiveKey !== 'baseInfo'"
      >
            <base-info-form
              @submit="baseInfoSubmit"
              ref="baseInfoForm" />
      </a-tab-pane>
      <a-tab-pane
        key="timeInfo"
        tab="营业时间"
        :disabled="tabActiveKey !== 'timeInfo'"
      >
            <time-info-form
              @submit="timeInfoSubmit"
              ref="timeInfoForm"
            ></time-info-form>
      </a-tab-pane>
      <a-tab-pane
        key="limitInfo"
        tab="业务限额"
        :disabled="tabActiveKey !== 'limitInfo'"
      >
            <limit-info-form
              @submit="limitInfoSubmit"
              ref="limitInfoForm"
            ></limit-info-form>
      </a-tab-pane>
      <a-tab-pane
        key="tradeInfo"
        tab="通道交易"
        :disabled="tabActiveKey !== 'tradeInfo'"
      >
            <trade-info-form
              @submit="tradeInfoSubmit"
              ref="tradeInfoForm"
            ></trade-info-form>
      </a-tab-pane>
    </a-tabs>
    <template v-if="tabActiveKey === 'baseInfo'">
      <div class="subtitle">通道支持银行配置</div>
      <div class="sub-content-block">
        <div class="btn-group">
          <a-button type="primary" @click="openBankModal('add', beanInfo)">
            <a-icon type="plus" />
            <span>增加</span>
          </a-button>
        </div>
       <a-table
          :columns="bankColumns"
          :dataSource="bankList"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          :scroll="{ x: 2200 }"
          :row-selection="{
            selectedRowKeysBank: selectedRowKeysBank,
            onChange: (selectedRowKeysBank) =>
              onSelectChangeBank(record, selectedRowKeysBank),
          }"
        >
          <template slot="operation" slot-scope="text, record">
            <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="editBank(record)" title="修改" ></a-icon>
            <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="viewBank(record)" title="详情" ></a-icon>
            <a-icon type="check-circle" v-if="record.recordStatus !== 'Y'" @click="cancelBank(record)" theme="twoTone" twoToneColor="#4a9ff5" title="启用"></a-icon>
            <a-icon type="minus-circle" v-if="record.recordStatus !== 'N'"  @click="cancelBank(record)" theme="twoTone" twoToneColor="#4a9ff5" title="停用"></a-icon>
<!--            <a class="text-btn" @click="editBank(record)">修改</a>-->
<!--            <a-->
<!--              class="text-btn"-->
<!--              v-if="record.recordStatus === 'Y'"-->
<!--              @click="cancelBank(record)"-->
<!--              >停用</a-->
<!--            >-->
<!--            <a class="text-btn" v-else @click="cancelBank(record)">启用</a>-->
<!--            <a class="text-btn" @click="viewBank(record)">详情</a>-->
          </template>
        </a-table>
        <a-modal
          v-model="modalBankVisible"
          :title="modalBankTitle"
          width="1050px"
          @ok="submitBank"
          :maskClosable="false"
        >
          <p-bank-operation ref="modalBankForm" />
        </a-modal>
      </div>
      <div class="subtitle">通道安全配置</div>
      <div class="sub-content-block">
        <a-table
          :columns="dstCfgColumns"
          :dataSource="dstCfgList"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          :scroll="{ x: 1600 }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys) =>
              onSelectChange(record, selectedRowKeys),
          }"
        >
          <template slot="operation" slot-scope="text, record">
            <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="editDst(record)" title="修改" ></a-icon>
            <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="viewDst(record)" title="详情"></a-icon>
          </template>
        </a-table>
        <a-modal
          v-model="modalDstVisible"
          :title="modalDstTitle"
          width="1050px"
          @ok="submitDst"
          :maskClosable="false"
        >
          <p-dst-channel-cfg-operation ref="modalDstForm" />
        </a-modal>
      </div>
      <div class="sub-content-block">
        <a-table
          :columns="secColumns"
          :dataSource="secList"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          :scroll="{ x: 1300 }"
        >
          <template slot="operation" slot-scope="text, record">
            <a class="text-btn" @click="editSec(record)">修改</a>
            <a class="text-btn" @click="viewSec(record)">详情</a>
          </template>
        </a-table>
        <a-modal
          v-model="modalSecVisible"
          :title="modalSecTitle"
          width="1050px"
          @ok="submitSec"
          :maskClosable="false"
        >
          <p-sec-plan-operation ref="modalSecForm" />
        </a-modal>
      </div>
    </template>
  </entity-view>
</template>
<script>
import EntityView from "../../../../components/common/entityView/EntityView.vue";
import FormItem from "../../../../components/common/entityView/FormItem.vue";
import PDstChannelCfgOperation from "./PDstChannelCfgOperation";
import PSecPlanOperation from "./PSecPlanOperation";
import PBankOperation from "./PBankOperation";
import BaseInfoForm from "./BaseInfoForm";
import TimeInfoForm from "./TimeInfoForm";
import LimitInfoForm from "./LimitInfoForm";
import TradeInfoForm from "./TradeInfoForm";

export default {
  name: "PDstChannelOperation",
  components: {
    EntityView,
    FormItem,
    PDstChannelCfgOperation,
    PSecPlanOperation,
    PBankOperation,
    BaseInfoForm,
    TimeInfoForm,
    LimitInfoForm,
    TradeInfoForm,
  },
  provide: function () {
    return {
      operationContext: this,
    };
  },
  props: {
    query: Object,
  },
  data: function () {
    return {
      modalTitle: "",
      operatorType: "add",
      modalVisible: true,
      modalBankVisible: false,
      modalBankTitle: "",
      modalDstVisible: false,
      modalDstTitle: "",
      modalSecVisible: false,
      modalSecTitle: "",
      tabActiveKey: "",
      // tabActiveKey: "tradeInfoForm",
      selectedRowKeys: [],
      selectedRowKeysBank: [],
      bankList: [],
      beanInfo: {
        baseProdCode: "",
        prodName: "",
        prodDesc: "",
      },
      rules: {
        dstChannelName: [{ required: true, message: "必输", trigger: "blur" }],
      },
      selectOptions: [],
      loading: false,
      pageInfo: {},
      bankColumns: [
        {
          title: "机构标识",
          dataIndex: "instId",
          fixed: "left",
          width: 120,
        },
        {
          title: "通道标识",
          dataIndex: "dstChannelId",
          width: 100,
          customRender: (text, row, index) => {
            switch (text) {
              case "UPAL":
                return "银联支付宝";
              case "MOMP":
                return "营销";
              case "FCPT":
                return "查控平台";
              case "IGRT":
                return "智能路由";
              case "NUCC":
                return "网联";
              case "WXZF":
                return "微信直联";
              case "CUPS":
                return "银联CUPS";
              case "UPQC":
                return "银联二维码";
              case "CSPT":
                return "征信服务平台";
              case "NUWX":
                return "网联微信";
              case "ALIP":
                return "支付宝直联";
              case "ACCT":
                return "虚拟账户";
              case "BATH":
                return "批量处理平台";
              case "NCQS":
                return "银联无卡快捷";
              case "ESB":
                return "银行ESB";
              case "NUAL":
                return "网联支付宝";
              case "UPAC":
                return "银联全渠道";
              case "UPWX":
                return "银联微信";
              case "XMUP":
                return "厦门银联";
              case "SZUP":
                return "深圳银联";
              case "HVPS":
                return "大额支付系统";
              case "BEPS":
                return "小额支付系统";
              case "IBPS":
                return "网银互联";
              case "CCBC":
                return "城银清算中心";
            }
          },
        },
        {
          title: "银行机构号",
          dataIndex: "bankNo",
          width: 200,
        },
        {
          title: "银行名称",
          dataIndex: "bankName",
          width: 200,
        },
        {
          title: "银行简码",
          dataIndex: "bankSimpleCode",
          width: 200,
        },
        {
          title: "支持业务类别",
          dataIndex: "supportBizType",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "智能路由";
              case "11":
                return "企业网银业务";
              case "20":
                return "快捷支付业务";
              case "10":
                return "人个网银业务";
            }
          },
        },
        {
          title: "借记账户支持标识",
          dataIndex: "debitSupportFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "支持";
              case "N":
                return "不支持";
            }
          },
        },
        {
          title: "贷记账户支持标志",
          dataIndex: "creditSupportFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "支持";
              case "N":
                return "不支持";
            }
          },
        },
        {
          title: "记录状态",
          dataIndex: "recordStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "启用";
              case "N":
                return "停用";
            }
          },
        },
        {
          title: "银行logo存储路径",
          dataIndex: "bankLogoUrl",
          width: 150,
        },
        {
          title: "参与营销活动标志",
          dataIndex: "mcFlag",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "Y":
                return "参与";
              case "N":
                return "不参与";
            }
          },
        },
        {
          title: "营销活动编号",
          dataIndex: "mcNo",
          width: 150,
        },
        {
          title: "营销活动名称",
          dataIndex: "mcName",
          width: 150,
        },
        {
          title: "单笔交易限额(元)",
          dataIndex: "singleLimitAmt",
          width: 150,
        },
        {
          title: "日累计交易限额(元)",
          dataIndex: "dayLimitAmt",
          width: 150,
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      pDstChannelColumns: [
        {
          title: "机构标识",
          width: 100,
          dataIndex: "instId",
          fixed: "left",
        },
        {
          title: "通道标识",
          dataIndex: "dstChannelId",
          width: 150,
          customRender(text) {
            return text
              ? {
                  UPAL: "银联支付宝",
                  MOMP: "营销",
                  FCPT: "查控平台",
                  IGRT: "智能路由",
                  NUCC: "网联",
                  WXZF: "微信直联",
                  CUPS: "银联CUPS",
                  UPQC: "银联二维码",
                  CSPT: "征信服务平台",
                  NUWX: "网联微信",
                  ALIP: "支付宝直联",
                  ACCT: "虚拟账户",
                  BATH: "批量处理平台",
                  NCQS: "银联无卡快捷",
                  ESB: "银行ESB",
                  NUAL: "网联支付宝",
                  UPAC: "银联全渠道",
                  UPWX: "银联微信",
                  XMUP: "厦门银联",
                  SZUP: "深圳银联",
                  HVPS: "大额支付系统",
                  BEPS: "小额支付系统",
                  IBPS: "网银互联",
                  CCBC: "城银清算中心",
                }[text]
              : "";
          },
        },
        {
          title: "银行机构号",
          dataIndex: "bankNo",
          width: 150,
        },
        {
          title: "银行名称",
          dataIndex: "bankName",
          width: 150,
        },
        {
          title: "银行简码",
          dataIndex: "bankSimpleCode",
          width: 150,
        },
        {
          title: "支持业务类别",
          dataIndex: "supportBizType",
          width: 150,
          customRender: (text) => {
            return text
              ? {
                  "00": "智能路由",
                  11: "企业网银业务",
                  20: "快捷支付业务",
                  10: "人个网银业务",
                }[text]
              : "";
          },
        },
        {
          title: "借记账户支持标识",
          dataIndex: "debitSupportFlag",
          width: 200,
          customRender: (text) => {
            return text
              ? {
                  Y: "支持",
                  N: "不支持",
                }[text]
              : "";
          },
        },
        {
          title: "记录状态",
          dataIndex: "recordStatus",
          width: 150,
          customRender: (text) => {
            return text
              ? {
                  Y: "启用",
                  N: "停用",
                }[text]
              : "";
          },
        },
        {
          title: "参与营销活动标志",
          dataIndex: "creditSupportFlag",
          width: 200,
          customRender: (text) => {
            return text
              ? {
                  Y: "参与",
                  N: "不参与",
                }[text]
              : "";
          },
        },
        {
          title: "营销活动编号",
          dataIndex: "mcNo",
          width: 150,
        },
        {
          title: "营销活动名称",
          dataIndex: "mcName",
          width: 150,
        },
        {
          title: "单笔交易限额(元)",
          dataIndex: "singleLimitAmt",
          width: 150,
        },
        {
          title: "日累计交易限额(元)",
          dataIndex: "dayLimitAmt",
          width: 150,
          customRender: (text) => {
            return text
              ? {
                  Y: "支持",
                  N: "不支持",
                }[text]
              : "";
          },
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      dstCfgColumns: [
        {
          title: "机构标识",
          width: 100,
          dataIndex: "instId",
          fixed: "left",
        },
        {
          title: "通道标识",
          dataIndex: "dstChannelId",
          width: 150,
          customRender(text) {
            return text
              ? {
                  UPAL: "银联支付宝",
                  WXZF: "微信直联",
                  NUWX: "网联微信",
                  ALIP: "支付宝直联",
                  NUAL: "网联支付宝",
                  UPAC: "银联全渠道",
                  UPWX: "银联微信",
                }[text]
              : "";
          },
        },
        {
          title: "通道类型",
          dataIndex: "dstChannelType",
          width: 120,
        },
        {
          title: "通道类型描述",
          dataIndex: "dstChannelTypeDesc",
          width: 200,
        },
        {
          title: "渠道号",
          dataIndex: "channelNo",
          width: 120,
        },
        {
          title: "服务商商户号",
          dataIndex: "providerMchntNo",
          width: 200,
        },
        {
          title: "主APPID",
          dataIndex: "appId",
          width: 200,
        },
        {
          title: "子APPID",
          dataIndex: "subAppId",
          width: 200,
        },
        {
          title: "安全计划标识",
          dataIndex: "secPlanId",
          width: 160,
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      secColumns: [
        {
          title: "安全计划标识",
          width: 120,
          dataIndex: "secPlanId",
          fixed: "left",
        },
        {
          title: "安全计划类型",
          dataIndex: "secPlanType",
          width: 120,
        },
        {
          title: "安全计划处理阶段",
          dataIndex: "secPlanStage",
          width: 200,
          customRender(text) {
            return text
              ? {
                  "00": "报文解析前",
                  11: "报文组装后",
                  "01": "报文解析后",
                  10: "报文组装前",
                }[text]
              : "";
          },
        },
        {
          title: "安全计划状态",
          dataIndex: "secPlanStatus",
          width: 120,
          customRender: (text) => {
            return text
              ? {
                  Y: "有效",
                  N: "无效",
                }[text]
              : "";
          },
        },
        {
          title: "安全计划描述",
          dataIndex: "secPlanDesc",
          width: 200,
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          width: 200,
        },
        {
          title: "修改时间",
          dataIndex: "updateTime",
          width: 200,
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      pDstChannelList: [],

      secList: [],
      dstCfgList: [],
      paginationBank: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      paginationDst: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      paginationSec: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    hasSelectedBank() {
      return this.selectedRowKeysBank.length > 0;
    },
  },
  //监听
  watch: {
    tabActiveKey (val, oldVal) {
      this.$nextTick(() => {
        switch (val) {
          case 'baseInfo':
            this.$refs.baseInfoForm.getList();
            break;
          case 'timeInfo':
            this.$refs.timeInfoForm.getPageInfo();
            break;
          case 'limitInfo':
            this.$refs.limitInfoForm.getPageInfo();
            break;
          case 'tradeInfo':
            this.$refs.tradeInfoForm.getList();
            break;
        }
      })
    }
  },
  methods: {
    async submit() {
      let res;
      switch (this.operatorType) {
        case "add":
          res = await this.add();
          break;
        case "edit":
          res = await this.edit();
          break;
        case "view":
          res = true;
          break;
        default:
          break;
      }
      return res;
    },
    async edit() {
      const res = await this.$refs.form.validate();
      if (res) {
        const params = {};
        const supportAcctType = this.supportAcctTypeChecked.join(",");
        Object.assign(params, this.beanInfo, {
          id: this.beanInfo.id,
          supportAcctType,
          optFlag: "upd",
        });
        const res = await this.$put(
          "/admin/igas/pDstChannelInfo/update",
          params
        );
        if (res.status === 200) {
          this.$message.success("保存成功！");
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      }
    },
    resetFields() {
      return this.$refs.form && this.$refs.form.resetFields();
    },
    setOperatorType(type) {
      this.operatorType = type;
    },
    async setBeanInfo(beanInfo) {
      this.beanInfo = beanInfo;
      // await this.getOne();
      // await this.getList();
      this.getBankList();
      this.getDstCfgList();
      this.getSecList();
    },

    async getBankList() {
      try {
        const res = await this.$get("/admin/igas/pBankSupportCfg", {
          instId: this.beanInfo.instId,
          dstChannelId: this.beanInfo.dstChannelId,
          optFlag: "upd",
        });
        let data = res.data;
        this.bankList = data.rows;
      } catch (e) {
        console.error(e);
      }
    },
    async getDstCfgList() {
      try {
        const res = await this.$get("/admin/igas/pDstChannelCfg", {
          instId: this.beanInfo.instId,
          dstChannelId: this.beanInfo.dstChannelId,
          optFlag: "upd",
        });
        let data = res.data;
        this.dstCfgList = data.rows;
      } catch (e) {
        console.error(e);
      }
    },
    async getSecList(secPlanId = "--") {
      try {
        const res = await this.$get("/admin/igas/pSecPlanInfo", {
          instId: this.beanInfo.instId,
          dstChannelId: this.beanInfo.dstChannelId,
          secPlanId: secPlanId,
          optFlag: "upd",
        });
        let data = res.data;
        this.secList = data.rows;
      } catch (e) {
        console.error(e);
      }
    },
    openBankModal(type = "add", beanInfo) {

      this.modalBankTitle = {
        add: "新增通道支持银行",
        edit: "编辑通道支持银行",
        view: "通道支持银行详情",
      }[type];
      this.modalBankVisible = true;
      this.$nextTick(() => {
        this.$refs.modalBankForm.setOperatorType(type);
        this.$refs.modalBankForm.resetFields();
        if (type === "add" || type === "edit" || type === "view") {
          this.$refs.modalBankForm.setBeanInfo(JSON.parse(JSON.stringify(beanInfo)), this.beanInfo.instId);
        }
      });
    },
    async editBank(item) {
      this.openBankModal("edit", item);
    },
    viewBank(item) {
      this.openBankModal("view", item);
    },
    async cancelBank(item) {

      await this.$post("/admin/igas/pBankSupportCfg/changeStatus", {
        optFlag: "use",
        bankNo: item.bankNo,
        supportBizType: item.supportBizType,
        recordStatus: item.recordStatus === "Y" ? "N" : "Y",
        instId: this.beanInfo.instId,
        dstChannelId: this.beanInfo.dstChannelId,
      }).then((res) => {
        if (res.status === 200) {
          this.$message.success("操作成功！");
          this.paginationBank.defaultCurrent = 1;
          this.getBankList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    async submitBank(e) {
      e && e.preventDefault && e.preventDefault();
      const res = await this.$refs.modalBankForm.submitBank();
      if (res) {
        this.modalBankVisible = false;
        this.paginationBank.defaultCurrent = 1;
        await this.getBankList();
      }
    },
    openDstModal(type = "edit", beanInfo) {
      this.modalDstTitle = {
        edit: "编辑",
        view: "详情",
      }[type];
      this.modalDstVisible = true;
      this.$nextTick(() => {
        this.$refs.modalDstForm.setOperatorType(type);
        if (type === "edit" || type === "view") {
          this.$refs.modalDstForm.setBeanInfo(beanInfo);
        }
        // this.$refs.modalDstForm.resetFields();
      });
    },
    async editDst(item) {
      this.openDstModal("edit", item);
    },
    viewDst(item) {
      this.openDstModal("view", item);
    },
    async submitDst(e) {
      e && e.preventDefault && e.preventDefault();
      const res = await this.$refs.modalDstForm.submitDst();
      if (res) {
        this.modalDstVisible = false;
        this.paginationDst.defaultCurrent = 1;
        await this.getDstCfgList();
      }
    },
    onSelectChange(record, selectedRowKeys) {

      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.getSecList(this.dstCfgList[selectedRowKeys].secPlanId);
    },
    onSelectChangeBank(record, selectedRowKeysBank) {

      console.log("selectedRowKeysBank changed: ", selectedRowKeysBank);
      this.selectedRowKeysBank = selectedRowKeysBank;
      this.getSecList(this.bankList[selectedRowKeysBank].secPlanId);
    },
    openSecModal(type = "edit", beanInfo) {

      this.modalSecTitle = {
        edit: "编辑",
        view: "详情",
      }[type];
      this.modalSecVisible = true;
      this.$nextTick(() => {
        this.$refs.modalSecForm.setOperatorType(type);
        if (type === "edit" || type === "view") {
          this.$refs.modalSecForm.setBeanInfo(beanInfo);
        }
      });
    },
    async editSec(item) {
      this.openSecModal("edit", item);
    },
    viewSec(item) {
      this.openSecModal("view", item);
    },
    async submitSec(e) {
      e && e.preventDefault && e.preventDefault();
      const res = await this.$refs.modalSecForm.submitSec();
      if (res) {
        this.modalSecVisible = false;
        this.paginationSec.defaultCurrent = 1;
        await this.getSecList();
      }
    },
    baseInfoSubmit() {
      console.log(...arguments);
    },
    timeInfoSubmit() {
      console.log(...arguments);
    },
    limitInfoSubmit() {
      console.log(...arguments);
    },
    tradeInfoSubmit() {
      console.log(...arguments);
    },
    initTabs() {
      this.tabActiveKey = 'baseInfo'
      /*this.$nextTick(async () => {
        await this.$refs.baseInfoForm.getList();
      })*/


    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../static/less/Common";
.subtitle {
  width: 100%;
  font-size: 18px;
  margin-bottom: 10px;
}
.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
</style>
